<template>
  <div class="gl_contentBox gl_heightFull">
    <p style="font-weight:800">机构详情</p>
    <p class="line" />
    <div class="nav">
      <div class="">
        <img class="img" :src="getStaticFileUrl(Detail.imagePath)" alt="">
      </div>
      <div>
        <div class="nav_center">
          <p>团体名称</p>
          <p>{{ Detail.name }}</p>
        </div>

        <div class="nav_center">
          <p>团体类型</p>
          <p>{{ type }}</p>
        </div>

        <div class="nav_center">
          <p>团体地址</p>
          <p>{{ Detail.address }}</p>
        </div>

        <div class="nav_center">
          <p>联系人</p>
          <p>{{ Detail.contactPerson }}</p>
        </div>

        <div class="nav_center">
          <p>中跆协会员号</p>
          <p>{{ Detail.ctkCode }}</p>
        </div>
      </div>
      <div>
        <div class="nav_center">
          <p>团体简称</p>
          <p>{{ Detail.shortName }}</p>
        </div>

        <div class="nav_center">
          <p>所在地区</p>
          <p>{{ addressDataForCheck(Detail.provinceCode, Detail.cityCode, Detail.countyCode) }}</p>
        </div>

        <div class="nav_center">
          <p>联系方式</p>
          <p>{{ Detail.phoneNumber }}</p>
        </div>

        <div class="nav_center">
          <p />
          <p />
        </div>

        <div class="nav_center">
          <p>省跆协会员号</p>
          <p>{{ Detail.ptkCode }}</p>
        </div>
      </div>
    </div>

    <div class="btn">
      <el-button size="mini" type="primary" @click="close">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubBranchDelegations } from '@/extend/api/hallswaggerApi/app.js';
// import { Api_GET_ClubBranchBranchEmployeesQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      Detail: {},
      type: ''
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
    this.getList();
    this.getDictByType(['district']);
  },

  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getList() {
      const _json = {
        OrganizationUnitIds: []
      };
      _json.OrganizationUnitIds[0] = this.$route.query.branchid;
      api_GET_ClubBranchDelegations(_json).then(res => {
        console.log(res);
        this.Detail = res.items[0];
        console.log(this.dict);
        for (var i = 0; i < this.dict.delegationType.length; i++) {
          if (this.dict.delegationType[i].code === this.Detail.delegationTypeCode) {
            this.type = this.dict.delegationType[i].value;
          }
        }
      });
    },
    close() {
      this.$router.push({ name: 'CampusData' });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    }

  }

};
</script>

<style lang="scss" scoped>
.line{
    height: 1px;
    width: 100%;
    background-color:  rgba(0, 0, 0, 0.09);
    margin-top: 12px;
    margin-bottom: 28px;
}
.nav {
    display: flex;
    .img {
        width: 130px;
        height: 130px;
        border-radius: 4px;
        margin-right: 29px;
    }
    .nav_center {
        width: 369px;
        display: flex;
        align-items: center;
        margin-bottom: 19px;
    }
    .nav_center p:nth-of-type(1){
        margin-right: 10px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
    }
     .nav_center p:nth-of-type(2){
        width: 270px;
        height: 16px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.55);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.btn {
    display: flex;
    justify-content: center;
   margin-top: 200px;
}
</style>
